<template>
  <a-spin :spinning="loading">
    <div class="page">
      <div style="display: flex; justify-content: space-between">
        <a-month-picker :size="size" :allowClear="false" placeholder="选择月份" @change="monthChange" v-model="defaultDate" />
        <div>
          <a-button type="primary" style="margin-right: 10px" @click="showModal"> <a-icon type="plus" />创建工资表 </a-button>
        </div>
      </div>
      <a-spin :spinning="isLoading">
        <div v-if="summaryList">
          <div class="fix-item-wrapper">
            <div class="fix-item-one">
              <div>
                <div class="fix-item-one-top">
                  <div class="fix-item-name" style="display: flex; width: 230px">
                    {{ this.summaryList.personalPeriod ? this.summaryList.personalPeriod : "--" }}
                    工资汇总
                    <img v-if="approStatus" :src="shenheImg" style="width: 74px; height: 22px" />
                  </div>
                </div>
                <div class="fix-item-one-bottom">
                  <div class="fix-item-one-bottomBox">
                    <div class="projectName">个税所属期:</div>
                    <div style="margin-left: 24px" class="contentName">
                      {{ this.summaryList.personalPeriod ? this.summaryList.personalPeriod : "--" }}
                    </div>
                  </div>
                  <div class="fix-item-one-bottomBox">
                    <div class="projectName">计薪人数:</div>
                    <div style="margin-left: 38px" class="contentName">
                      {{ this.summaryList.empNumber ? this.summaryList.empNumber : 0 }}人
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <img :src="decoration" style="width: 58px; height: 30px" />
              </div>
            </div>

            <div class="flew-box flex-center-between">
              <div class="flew-box-content flex-center overflow-x-auto">
                <div v-for="(item, idx) in summaryList.covarianceItemAmountVOList" :key="item.name" class="flew-box-contentBox pv24">
                  <div class="flew-box-contentBox-right" :class="{ 'border-left': idx > 0 }">
                    <div class="projectName">{{ item.name }}</div>
                    <div class="contentName">
                      <a-tooltip>
                        <template slot="title"> ¥{{ item.amount || 0 }} </template>
                        ¥{{ item.amount || 0 }}
                      </a-tooltip>
                    </div>
                  </div>
                </div>
              </div>
              <div class="goDetail">
                <img :src="goDetail" style="width: 24px; height: 24px; cursor: pointer" @click="showAllDetails" />
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <a-empty style="margin-top: 100px" />
        </div>
        <div v-if="salaryTemplateList && salaryTemplateList.length > 0" class="formDetail">工资表详情</div>
        <div class="fix-item-childWrapper flex-center mt12 br8 p16 bgc-white" v-for="(item, index) in salaryTemplateList" :key="index">
          <div class="fix-item-one border-right pr16 flex-shrink-0" style="width: 160px">
            <img :src="marshalling" style="width: 32px; height: 32px; box-shadow: 0 8px 8px -4px rgba(115, 115, 243, 0.6)" />
            <div class="fix-item-name ml12 pointer" @click="showDetails(item)">{{ item.name }}</div>
          </div>
          <div class="fix-item-two flex-shrink-0" style="width: 80px">
            <div style="font-size: 12px; font-weight: 400; color: #a6a8b4">状态</div>
            <p v-if="item.isArchive === true" class="fix-item-tip">已归档</p>
            <p v-else class="fix-item-tip2">未归档</p>
          </div>
          <div class="fix-item-three" style="flex: 1; padding: 0; overflow-x: auto; height: auto; width: auto">
            <div class="flex-shrink-0 ph16" style="min-width: 112px">
              <div class="childpProjectName pb8">个税所属期</div>
              <div class="childContentName">{{ item.yearly }}年{{ item.monthly }}月</div>
            </div>
            <div class="flex-shrink-0 pr16" style="min-width: 112px">
              <div class="childpProjectName pb8">计薪人数</div>
              <div class="childContentName">{{ item.empNumber ? item.empNumber : 0 }}人</div>
            </div>
            <div v-for="li in item.covarianceItemAmountVOList" :key="li.name" class="flex-shrink-0 pr16" style="min-width: 112px">
              <div class="childpProjectName pb8">{{ li.name }}</div>
              <div class="childContentName">¥{{ li.amount || 0 }}</div>
            </div>
          </div>
          <div class="ml16 flex-shrink-0" style="width: 102px">
            <a-space :size="16">
              <span class="tc-theme pointer" @click="showDetails(item)">查看详情</span>
              <a-popconfirm title="记录删除后将无法恢复，确定要删除吗？" placement="topRight" @confirm="deleteTemplate(item)">
                <span v-if="!approStatus && item.isArchive === false" class="tc-theme pointer">删除</span>
              </a-popconfirm>
            </a-space>
          </div>
        </div>
      </a-spin>
    </div>

    <a-modal v-model="visible" title="创建工资表" width="600px" @ok="handleOk" okText="下一步">
      <a-alert message="创建下月工资表时，本月工资表自动归档且不能再创建本月工资表" banner closable />
      <a-form-model
        ref="ruleForm"
        prop="form"
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        style="margin-left: 30px; margin-top: 20px"
      >
        <a-form-model-item
          prop="template"
          ref="template"
          label="工资表模板"
          :rules="{
            required: true,
            message: '工资表模板必选'
          }"
        >
          <a-select
            style="width: 300px; margin-left: 10px"
            placeholder="请选择"
            @change="handleChange"
            v-model="form.template"
            mode="multiple"
          >
            <a-select-option v-for="(item, index) in templatesList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          prop="month"
          ref="month"
          label="计薪月份"
          :rules="{
            required: true,
            message: '计薪月份必选'
          }"
        >
          <a-select style="width: 300px; margin-left: 10px" placeholder="请选择" @change="handleMonthChange" v-model="form.month">
            <a-select-option value="1" :disabled="approStatus">
              {{ creationTimeYear }}年{{ creationTimeMonth }}月
              <span v-if="approStatus">（账单已生成）</span>
            </a-select-option>
            <a-select-option value="2">
              {{ creationTimeMonth + 1 > 12 ? creationTimeYear + 1 : creationTimeYear }}年{{
                creationTimeMonth + 1 > 12 ? creationTimeMonth - 11 : creationTimeMonth + 1
              }}月
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
      <a-layout />
    </a-modal>
    <a-modal v-model="nextVisible" title="确定计薪人数" width="800px" @ok="handleNextOk" okText="创建" cancelText="上一步">
      <div style="margin-top: 15px">
        <a-input-search
          allow-clear
          class="mr12"
          placeholder="姓名/手机号"
          style="width: 180px"
          v-model="nameOrPhoneNumber"
          @search="handleNameChange"
        />
        <a-select style="width: 120px" @change="handleGroupChange" placeholder="请选择">
          <a-select-option v-for="(item, index) in groupList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </div>
      <a-table
        :loading="nextLoading"
        style="margin-top: 15px"
        :columns="columns"
        row-key="key"
        :pagination="pagination"
        :data-source="wageList"
        @change="handleTableChange"
      ></a-table>
      <a-layout />
    </a-modal>
    <a-modal v-model="secondVisible" title="确认计薪人员" width="600px" @ok="handleSecondOk" okText="下一步" cancelText="上一步">
      <div class="emp-title">
        <span>检测到以下员工本月已创建月工资表，是否选择更换工资表？</span>
        <a-button style="margin-left: 20px" type="primary" @click="replace" v-if="selectedRowKeys.length > 0">更换</a-button>
      </div>
      <a-table
        style="margin-top: 15px"
        :columns="empColumns"
        :data-source="createdList"
        row-key="key"
        :scroll="{ y: 300 }"
        :pagination="false"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
      ></a-table>
      <a-layout />
    </a-modal>
  </a-spin>
</template>
<script>
import {} from "@/api/wages/template";
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "手机号",
    dataIndex: "phone",
    key: "phone"
  },
  {
    title: "薪资组",
    dataIndex: "salaryGroupName",
    key: "salaryGroupName"
  }
];
const empColumns = [
  {
    title: "姓名",
    dataIndex: "empName",
    key: "empName"
  },
  {
    title: "薪资组",
    dataIndex: "salaryGroupName",
    key: "salaryGroupName"
  },
  {
    title: "月工资表名称",
    dataIndex: "salaryTemplateName",
    key: "salaryTemplateName"
  }
];
import {
  monthlySalaryNewReq,
  getMonthlySalaryNewReq,
  postMonthlySalaryNewReq,
  deleteTemplateSalary,
  getEmpListReqNew,
  getCreatedReqNew,
  deleteEmployeNewReq,
  getnotDetailsList,
  selectSalaryGroup,
  getLastOne,
  getGroup,
  filedLastMonthNewReq,
  getIsCreated,
  getSelectById
} from "@/api/wages/monthly";
import { getTemplates } from "@/api/wages/template";
import moment from "moment";
export default {
  data() {
    return {
      nextLoading: false,
      creationTimeYear: null,
      creationTimeMonth: null,
      isBack: "false",
      groupId: null,
      groupList: [],
      loading: true,
      shenheImg: require("@/assets/img/wages/monthly/shenhe.png"),
      goDetail: require("@/assets/img/wages/monthly/goDetail.png"),
      decoration: require("@/assets/img/wages/monthly/decoration.png"),
      marshalling: require("@/assets/img/wages/monthly/marshalling.png"),
      defaultDate: null,
      selectedRowKeys: [],
      nameOrPhoneNumber: null,
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true
      },
      personalPeriod: null,
      notWagesEmp: [],
      entityCount: 0,
      allTemplatesId: [],
      empState: null,
      empColumns,
      allId: [],
      allTemplateId: [],
      salaryTemplateList: [],
      summaryList: [],
      name: "",
      templateId: null,
      createMonth: null,
      createYear: null,
      templatesList: [],
      now: moment().format("YYYY-MM"),
      monthly: null,
      yearly: null,
      columns,
      form: {},
      secondVisible: false,
      nextVisible: false,
      visible: false,
      size: "default",
      companyId: this.$store.state.hr.companyId,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      createdList: [],
      wageList: [],
      salaryTemplateInformationList: [],
      empIdList: [],
      selectMonth: null,
      nameOrPhone: null,
      nextState: true,
      isLoading: false,
      approStatus: false
    };
  },
  created() {
    this.isBack = this.$route.query.isBack ? this.$route.query.isBack : "false";
    this.getCreationTime();
    this.getTemplatesList();
    this.getLastOneDate();
    // 查询审批状态
  },

  methods: {
    getSelectById(e) {
      getSelectById({
        monthSalaryId: e
      }).then((res) => {
        if (res.data) {
          this.approStatus = true;
        } else {
          this.approStatus = false;
        }
      });
    },
    handleGroupChange(e, a) {
      this.groupId = e;
      this.handleSecondOk();
    },
    // 获取到创建的时间
    getCreationTime() {
      getLastOne({ companyId: this.companyId }).then((res) => {
        this.creationTimeMonth = res.data.monthly ? res.data.monthly : parseInt(moment(this.now).subtract(1, "months").format("MM"));
        this.creationTimeYear = res.data.yearly ? res.data.yearly : parseInt(moment(this.now).subtract(1, "months").format("YYYY"));
      });
    },

    // 对于初始时间的处理
    getLastOneDate() {
      if (this.isBack === "true") {
        this.monthly = this.$route.query.monthly ? this.$route.query.monthly : null;
        this.yearly = this.$route.query.yearly ? this.$route.query.yearly : null;
        if (this.yearly === null && this.monthly === null) {
          getLastOne({ companyId: this.companyId }).then((res) => {
            this.monthly = res.data.monthly;
            this.yearly = res.data.yearly;
            if (res.data.yearly) {
              this.defaultDate = moment(res.data.yearly + "-" + res.data.monthly, "YYYY-MM");
            } else {
              this.defaultDate = moment(this.now, "YYYY-MM");
            }
            this.getMonthlySalaryPage();
            this.getmonthlySalaryByCompanyId();
          });
        }
        this.getMonthlySalaryPage();
        this.getmonthlySalaryByCompanyId();
        this.defaultDate = moment(this.yearly + "-" + this.monthly, "YYYY-MM");
      } else {
        getLastOne({ companyId: this.companyId }).then((res) => {
          this.monthly = res.data.monthly;
          this.yearly = res.data.yearly;
          if (res.data.yearly) {
            this.defaultDate = moment(res.data.yearly + "-" + res.data.monthly, "YYYY-MM");
          } else {
            this.defaultDate = moment(this.now, "YYYY-MM");
          }
          this.getMonthlySalaryPage();
          this.getmonthlySalaryByCompanyId();
        });
      }
    },
    // 员工批量更换模板（table选择）
    onSelectChange(e, a) {
      this.empIdList = [];
      this.selectedRowKeys = e;
      a.forEach((item) => {
        this.empIdList.push(item.employeeSalaryId);
      });
    },
    handleNameChange(e) {
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.nameOrPhone = e;
      getEmpListReqNew({
        companyId: this.companyId,
        monthly: this.createMonth > 12 ? this.createMonth - 12 : this.createMonth,
        yearly: this.createMonth > 12 ? parseInt(this.creationTimeYear) + 1 : parseInt(this.creationTimeYear),
        salaryGroupId: this.groupId,
        // 加salaryGroupId（薪资组筛选）
        nameOrPhoneNumber: this.nameOrPhone,
        salaryTemplateIds: this.templateId === 99999 ? this.allTemplatesId : this.templateId,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize
      }).then((res) => {
        this.pagination.total = res.data.entityCount; // 共多少条
        this.pagination.pageSize = res.data.pageSize; // 每页多少条
        this.pagination.current = res.data.pageNo; // 当前第几页
        this.wageList = res.data.entities;
        this.entityCount = res.data.entityCount;
      });
    },
    // 分页
    handleTableChange(pagination, filters, sorter) {
      // this.notWagesEmp = [];
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      getEmpListReqNew({
        companyId: this.companyId,
        monthly: this.createMonth > 12 ? this.createMonth - 12 : this.createMonth,
        yearly: this.createMonth > 12 ? parseInt(this.creationTimeYear) + 1 : parseInt(this.creationTimeYear),
        salaryGroupId: this.groupId,
        nameOrPhoneNumber: this.nameOrPhone,
        salaryTemplateIds: this.templateId === 99999 ? this.allTemplatesId : this.templateId,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize
      }).then((res) => {
        this.pagination.total = res.data.entityCount; // 共多少条
        this.pagination.pageSize = res.data.pageSize; // 每页多少条
        this.pagination.current = res.data.pageNo; // 当前第几页
        this.wageList = res.data.entities;
        this.entityCount = res.data.entityCount;
      });
    },
    // 检测到以下员工本月已创建月工资表的下一步
    handleSecondOk() {
      this.notWagesEmp = [];
      this.wageList = [];
      this.nextVisible = true;
      this.nextLoading = true;
      getGroup({
        salaryTemplateIds: this.templateId === 99999 ? this.allTemplatesId : this.templateId
      }).then((res) => {
        this.groupList = res.data;
      });
      getnotDetailsList({
        companyId: this.companyId,
        monthly: this.createMonth > 12 ? this.createMonth - 12 : this.createMonth,
        yearly: this.createMonth > 12 ? parseInt(this.creationTimeYear) + 1 : parseInt(this.creationTimeYear),
        salaryTemplateIds: this.templateId === 99999 ? this.allTemplatesId : this.templateId
      }).then((res) => {
        this.notWagesEmp = res.data;
        getEmpListReqNew({
          companyId: this.companyId,
          monthly: this.createMonth > 12 ? this.createMonth - 12 : this.createMonth,
          yearly: this.createMonth > 12 ? parseInt(this.creationTimeYear) + 1 : parseInt(this.creationTimeYear),
          salaryGroupId: this.groupId,
          salaryTemplateIds: this.templateId === 99999 ? this.allTemplatesId : this.templateId,
          pageNo: 1,
          pageSize: 10
        })
          .then((res) => {
            this.nextLoading = false;
            this.pagination.total = res.data.entityCount; // 共多少条
            this.pagination.pageSize = res.data.pageSize; // 每页多少条
            this.pagination.current = res.data.pageNo; // 当前第几页
            this.wageList = res.data.entities;
            this.entityCount = res.data.entityCount;
          })
          .catch((err) => {
            this.nextLoading = false;
            console.log("debug log --> ", err);
          });
      });
    },
    // 员工更换工资表
    replace() {
      deleteEmployeNewReq(this.empIdList).then((res) => {
        this.$notification["success"]({
          message: "success",
          description: "已更换"
        });
        this.handleOk();
        this.selectedRowKeys = [];
      });
    },
    // 删除模板
    deleteTemplate(item) {
      deleteTemplateSalary(item.id).then((res) => {
        this.$notification["success"]({
          message: "success",
          description: "删除成功"
        });
        getLastOne({ companyId: this.companyId }).then((res) => {
          this.monthly = res.data.monthly;
          this.yearly = res.data.yearly;
          this.creationTimeMonth = res.data.monthly ? res.data.monthly : parseInt(moment(this.now).subtract(1, "months").format("MM"));
          this.creationTimeYear = res.data.yearly ? res.data.yearly : parseInt(moment(this.now).subtract(1, "months").format("YYYY"));
          if (res.data.yearly) {
            this.defaultDate = moment(res.data.yearly + "-" + res.data.monthly, "YYYY-MM");
          } else {
            this.defaultDate = moment(this.now, "YYYY-MM");
          }
          this.getMonthlySalaryPage();
          this.getmonthlySalaryByCompanyId();
        });
      });
    },
    // 查看详情
    showAllDetails() {
      this.$router.push({
        path: "/wages/yuegongzibiao/details",
        query: {
          salaryHeaderId: this.summaryList.id,
          salaryTemplateId: this.allTemplateId.join(","),
          templateId: this.allId.join(","),
          isAll: true,
          title: this.yearly + "年" + this.monthly + "月工资汇总表",
          monthly: this.monthly,
          yearly: this.yearly,
          approStatus: this.approStatus
        }
      });
    },
    // 获取公司下的工资表模板
    getTemplatesList() {
      getTemplates({ companyId: this.companyId }).then((res) => {
        this.templatesList = res.data;
        res.data.forEach((item, index) => {
          this.allTemplatesId.push(item.id);
        });
      });
    },
    // 日期选择器变化
    monthChange(e) {
      this.monthly = parseInt(moment(e).format("MM"));
      this.yearly = parseInt(moment(e).format("YYYY"));
      this.getmonthlySalaryByCompanyId();
      this.getMonthlySalaryPage();
    },
    // 查询公司某月份的月工资汇总
    getmonthlySalaryByCompanyId() {
      monthlySalaryNewReq({
        companyId: this.companyId,
        monthly: this.monthly,
        yearly: this.yearly
      }).then((res) => {
        if (res.data === null) {
          this.summaryList = null;
        } else {
          this.getSelectById(res.data.id);
          this.summaryList = res.data;
          this.personalPeriod = res.data.personalPeriod ? res.data.personalPeriod : "";
        }
      });
    },
    // 获取公司下的工资表模板月工资
    getMonthlySalaryPage() {
      this.allTemplateId = [];
      this.loading = true;
      getMonthlySalaryNewReq({
        companyId: this.companyId,
        monthly: this.monthly,
        yearly: this.yearly,
        pageNo: 1,
        pageSize: 100
      })
        .then((res) => {
          this.loading = false;
          if (res.data.entities === null) {
            this.salaryTemplateList = [];
          } else {
            this.salaryTemplateList = res.data.entities ? res.data.entities : [];
            this.salaryTemplateList.forEach((item) => {
              this.allTemplateId.push(item.id);
              this.allId.push(item.salaryTemplateId);
            });
          }
        })
        .catch((error) => {
          console.log("Error", error);
          this.loading = false;
        });
    },
    // 创建工资表选择模板变化
    handleChange(e, a) {
      this.salaryTemplateInformationList = [];
      e.forEach((item, index) => {
        this.salaryTemplateInformationList.push({
          salaryTemplateId: item,
          name: a[index].componentOptions.children[0].text.trim(),
          salaryTemplateName: a[index].componentOptions.children[0].text.trim()
        });
      });
      this.templateId = e.join(",");
    },
    // 创建工资表选择月份变化
    handleMonthChange(e) {
      if (e === "1") {
        this.createMonth = parseInt(this.creationTimeMonth);
        this.createYear = parseInt(this.creationTimeYear);
        this.selectMonth = 0;
      }
      if (e === "2") {
        this.createMonth = parseInt(this.creationTimeMonth) + 1;
        this.createYear = parseInt(this.createMonth > 12 ? this.creationTimeYear + 1 : this.creationTimeYear);
        this.selectMonth = 1;
      }
    },
    // 创建工资表点击创建
    handleNextOk() {
      this.isLoading = true;
      this.secondVisible = false;
      this.nextVisible = false;
      this.visible = false;
      const data = {
        isArchive: false,
        companyId: this.companyId,
        monthly: this.createMonth > 12 ? this.createMonth - 12 : this.createMonth,
        yearly: this.createMonth > 12 ? parseInt(this.creationTimeYear) + 1 : parseInt(this.creationTimeYear),
        salaryTemplateInformationList: this.salaryTemplateInformationList,
        selectMonth: this.selectMonth
      };
      postMonthlySalaryNewReq(data)
        .then((res) => {
          this.$notification["success"]({
            message: "success",
            description: "创建成功"
          });
          this.isLoading = false;
          this.isBack = false;
          this.getCreationTime();
          this.getLastOneDate();
        })
        .catch((err) => {
          this.isLoading = false;
          console.log("debug log --> ", err);
        });
    },
    // 员工是否创建月工资(创建工资表下一步)
    handleOk() {
      var idList = [];
      var nameList = [];
      this.salaryTemplateInformationList.forEach((item) => {
        idList.push(item.salaryTemplateId);
        nameList.push(item.name);
      });

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const monthly = this.createMonth > 12 ? this.createMonth - 12 : this.createMonth;
          const yearly = this.createMonth > 12 ? parseInt(this.creationTimeYear) + 1 : parseInt(this.creationTimeYear);
          getIsCreated({
            // 查询选中的工资表是否已经创建
            salaryTemplateIdListString: idList.join(","),
            nameListString: nameList.join(","),
            companyId: this.companyId,
            monthly,
            yearly
          }).then(async (res) => {
            if (res.data.length > 0) {
              const notList = res.data.map((item) => item.name);
              this.$notification["error"]({
                message: "error",
                description: `创建失败,${notList.join(",")}工资表已创建`
              });
            } else {
              const isRemindArchiveLastMonth = await this.$request({
                url: `/salary/api/v1/salaryTemplateSalaries/isRemindArchiveLastMonth`,
                params: {
                  companyId: this.companyId,
                  monthly,
                  yearly
                }
              }).then((res) => {
                return res.data;
              });
              if (isRemindArchiveLastMonth) {
                const _this = this;
                _this.nextState = false;
                _this.$refs.ruleForm.validate((valid) => {
                  if (valid) {
                    this.$confirm({
                      title: "正在创建下月工资表，点击确定本月工资表将自动归档",
                      onOk() {
                        filedLastMonthNewReq({
                          companyId: _this.companyId,
                          monthly,
                          yearly
                        }).then((res) => {
                          _this.nextState = true;
                          if (_this.nextState === true) {
                            _this.wageList = [];
                            _this.$refs.ruleForm.validate((valid) => {
                              if (valid) {
                                selectSalaryGroup().then((res) => {});
                                const salaryTemplateIds = _this.templateId === 99999 ? _this.allTemplatesId : _this.templateId;
                                getCreatedReqNew({
                                  companyId: _this.companyId,
                                  monthly,
                                  yearly,
                                  salaryTemplateIds
                                }).then((res) => {
                                  _this.createdList = res.data;
                                  if (_this.createdList.length) {
                                    _this.secondVisible = true;
                                  } else {
                                    _this.notWagesEmp = [];
                                    _this.nextVisible = true;
                                    _this.nextLoading = true;
                                    getGroup({
                                      salaryTemplateIds
                                    }).then((res) => {
                                      _this.groupList = res.data;
                                    });

                                    getnotDetailsList({
                                      companyId: _this.companyId,
                                      monthly,
                                      yearly,
                                      salaryTemplateIds
                                    }).then((res) => {
                                      _this.notWagesEmp = res.data;
                                    });
                                    getEmpListReqNew({
                                      companyId: _this.companyId,
                                      monthly,
                                      yearly,
                                      salaryGroupId: _this.groupId,
                                      salaryTemplateIds,
                                      pageNo: 1,
                                      pageSize: 10
                                    })
                                      .then((res) => {
                                        _this.nextLoading = false;
                                        _this.pagination.total = res.data.entityCount;
                                        _this.pagination.pageSize = res.data.pageSize;
                                        _this.pagination.current = res.data.pageNo;
                                        _this.wageList = res.data.entities;
                                        _this.entityCount = res.data.entityCount;
                                        res.data.entities.forEach((item, index) => {
                                          if (item.isFixed === false) {
                                            _this.notWagesEmp.push(item.empId);
                                          }
                                        });
                                      })
                                      .catch((err) => {
                                        _this.nextLoading = false;
                                        console.log("debug log --> ", err);
                                      });
                                  }
                                });
                              }
                            });
                          }
                        });
                      },
                      onCancel() {
                        _this.nextState = true;
                      }
                    });
                  }
                });
              }
              if (this.nextState === true) {
                this.wageList = [];
                this.$refs.ruleForm.validate((valid) => {
                  if (valid) {
                    selectSalaryGroup().then((res) => {});
                    getCreatedReqNew({
                      companyId: this.companyId,
                      monthly: this.createMonth > 12 ? this.createMonth - 12 : this.createMonth,
                      yearly: this.createMonth > 12 ? parseInt(this.creationTimeYear) + 1 : parseInt(this.creationTimeYear),
                      salaryTemplateIds: this.templateId === 99999 ? this.allTemplatesId : this.templateId
                    }).then((res) => {
                      this.createdList = res.data;
                      if (this.createdList.length) {
                        this.secondVisible = true;
                      } else {
                        this.notWagesEmp = [];
                        this.nextVisible = true;
                        this.nextLoading = true;
                        getGroup({
                          salaryTemplateIds: this.templateId === 99999 ? this.allTemplatesId : this.templateId
                        }).then((res) => {
                          this.groupList = res.data;
                        });

                        getnotDetailsList({
                          companyId: this.companyId,
                          monthly: this.createMonth > 12 ? this.createMonth - 12 : this.createMonth,
                          yearly: this.createMonth > 12 ? parseInt(this.creationTimeYear) + 1 : parseInt(this.creationTimeYear),
                          salaryTemplateIds: this.templateId === 99999 ? this.allTemplatesId : this.templateId
                        }).then((res) => {
                          this.notWagesEmp = res.data;
                        });
                        getEmpListReqNew({
                          companyId: this.companyId,
                          monthly: this.createMonth > 12 ? this.createMonth - 12 : this.createMonth,
                          yearly: this.createMonth > 12 ? parseInt(this.creationTimeYear) + 1 : parseInt(this.creationTimeYear),
                          salaryGroupId: this.groupId,
                          salaryTemplateIds: this.templateId === 99999 ? this.allTemplatesId : this.templateId,
                          pageNo: 1,
                          pageSize: 10
                        })
                          .then((res) => {
                            this.nextLoading = false;
                            this.pagination.total = res.data.entityCount; // 共多少条
                            this.pagination.pageSize = res.data.pageSize; // 每页多少条
                            this.pagination.current = res.data.pageNo; // 当前第几页
                            this.wageList = res.data.entities;
                            this.entityCount = res.data.entityCount;
                            res.data.entities.forEach((item, index) => {
                              if (item.isFixed === false) {
                                this.notWagesEmp.push(item.empId);
                              }
                            });
                          })
                          .catch((err) => {
                            this.nextLoading = false;
                            console.log("debug log --> ", err);
                          });
                      }
                    });
                  }
                });
              }
            }
          });
        }
      });
    },
    showDetails(item) {
      this.$router.push({
        path: "/wages/yuegongzibiao/details",
        query: {
          tableName: item.name,
          isArchive: item.isArchive,
          salaryTemplateId: item.id,
          templateId: item.salaryTemplateId,
          personalPeriod: this.personalPeriod,
          monthly: this.monthly,
          yearly: this.yearly,
          approStatus: this.approStatus
        }
      });
    },
    goUpload() {
      this.$router.push({
        path: "/wages/monthly/uploadPayroll"
      });
    },
    showModal() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
        this.form = {};
      });

      this.templateId = null;
      this.createMonth = null;
      this.createYear = null;
      this.name = "";
    }
  }
};
</script>
<style lang="scss" scoped>
.emp-title {
  padding-left: 24px;
  line-height: 48px;
  height: 48px;
}
.formDetail {
  height: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #3c3d43;
  border-left: 4px solid #6b6bf2;
  display: flex;
  align-items: center;
  padding-left: 8px;
  margin-top: 24px;
  margin-bottom: 24px;
}
.page {
  padding: 0 12px;
  .headerBox {
    display: flex;
    justify-content: space-between;
  }
}
.fix-item-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  .flew-box {
    width: 79%;
    height: 104px;
    background: #ffffff;
    box-shadow: 0px 6px 16px 8px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    .flew-box-content {
      .flew-box-contentBox-right {
        margin-left: 12px;
        min-width: 120px;
        padding-left: 16px;
        padding-right: 16px;
      }
      .goDetail {
        width: 104px;
        min-width: 104px;
        max-width: 104px;
        flex-shrink: 0;
      }
      .projectName {
        font-size: 12px;
        font-weight: 400;
        color: #a6a8b4;
      }
      .contentName {
        font-size: 18px;
        font-weight: bold;
        color: #55565d;
        margin-top: 8px;

        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .fix-item-one {
    margin-right: 24px;
    background: #ffffff;
    box-shadow: 0px 6px 16px 8px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 332px;
  }
  .fix-item-one-top {
    font-size: 16px;
    font-weight: 500;
    color: #3c3d43;
  }
  .fix-item-one-bottom {
    .fix-item-one-bottomBox {
      display: flex;
      margin-top: 8px;
      .projectName {
        font-size: 14px;
        font-weight: 400;
        color: #767885;
      }
      .contentName {
        font-size: 14px;
        font-weight: 400;
        color: #55565d;
      }
    }
  }
}
.projectName {
  font-size: 13px;
  font-weight: 300;
  color: #ffffff;
}
.contentName {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}
.childpProjectName {
  font-size: 13px;
  font-weight: 300;
  color: #a6a8b4;
}
.childContentName {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}
.fix-item-childWrapper {
  width: 100%;
  height: 100px;
  .fix-item-one {
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 15%;
    border-right: 1px solid #e8e8e8;
  }
  .fix-item-two {
    width: 10%;
    height: 45px;

    border-right: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .fix-item-three {
    width: 72%;
    margin-top: 10px;
    padding-left: 55px;
    padding-right: 55px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-right: 1px solid #e8e8e8;
    overflow-x: auto;
  }
  .fix-item-name {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    font-size: 16px;
    color: #55565d;
  }
  .fix-item-tip2 {
    font-size: 12px;
    font-weight: 500;
    color: #7b7b7b;
    line-height: 24px;
    background: #f0f0f0;
    width: 48px;
    height: 24px;
    margin-top: 5px;

    border-radius: 2px;
    text-align: center;
  }
  .fix-item-tip {
    font-size: 12px;
    font-weight: 500;
    color: #11ae8b;
    line-height: 24px;
    background: rgba(50, 204, 170, 0.12);
    width: 48px;
    height: 24px;
    margin-top: 5px;

    border-radius: 2px;
    text-align: center;
  }
}
</style>
